<template>
  <view class="page">
    <view style="background-color: white; width: 100%;height: var(--status-bar-height);">
      <!-- 这里是状态栏 -->
    </view>
    <uni-nav-bar color="#000" left-icon="left" @clickLeft="navBack()" title="添加我的实验" rightIcon="plus"
                 @clickRight="clickrighticon()"/>

    <view class="plusmenu" v-if="showplusmenu">
      <view class="menulist">
        <view class="text">导入现有实验</view>
        <view class="line"></view>
        <view class="text" @click="clickexcel()">导入excel数据</view>
      </view>
    </view>

    <!-- <view class="title_box">
      <uni-icons type="forward"></uni-icons>
      <text>step.1 总体把握</text>
    </view> -->
    <view class="title_box">
      <image class="image_5" style="float :left; margin-right: 10px; width: 20px; height: 20px;"
             src="../../static/images/0d432bf50adced99be0d726890c0d4ec.png"/>
      <text>总体把握</text>
    </view>

    <view class="envir_box">
      <view class="head_block">
        <view class="flex_1">
          <text class="text-gray">实验总时长</text>
          <text class="text_green">{{ expertotaltime }}分钟</text>
        </view>
        <view class="flex_1">
          <text class="text-gray">节点数</text>
          <text class="text_green">{{ experdot }}</text>
        </view>
      </view>

      <view class="input-group">
        <view class="input-item">
          <text class="input-label">实验名称</text>
          <input class="input-field" v-model="expername" maxlength="11" placeholder="请输入实验名称"/>
        </view>

        <view class="input-item">
          <text class="input-label">实验简介</text>
          <textarea class="textarea-field" v-model="experins" placeholder="请输入实验简介（选填）" placeholder-class="textarea-placeholder" :auto-height="true" :show-confirm-bar="false"></textarea>
        </view>
      </view>
    </view>

    <!--		<view class="title_box" v-if="showstep2">-->
    <!--			&lt;!&ndash; <uni-icons type="forward"></uni-icons> &ndash;&gt;-->
    <!--			<image class="image_5" style="float :left; margin-right: 10px; width: 20px; height: 20px;" src="../../static/images/0d432bf50adced99be0d726890c0d4ec.png" />-->
    <!--			<text>数据修改</text>-->
    <!--&lt;!&ndash;			<text class="right1" @click="setinfo()" v-if="showset">修改</text>&ndash;&gt;-->
    <!--&lt;!&ndash;			<text class="right2" @click="saveinfo()" v-if="!showset">保存</text>&ndash;&gt;-->
    <!--		</view>-->

    <view class="infocard_full">
      <view class="card-header">
        <view class="section_11"></view>
        <text class="text_10">阶段数据详表</text>
      </view>

      <view class="infocard_box">
        <view class="table-scroll">
          <uni-table border stripe emptyText="暂无更多数据" class="data-table">
            <uni-tr>
              <uni-th align="center" width="120rpx">
                <view class="table_th">节点</view>
              </uni-th>
              <uni-th align="center" width="200rpx">
                <view class="table_th">时间(分钟)</view>
              </uni-th>
              <uni-th align="center" width="200rpx">
                <view class="table_th">温度(℃)</view>
              </uni-th>
              <uni-th align="center" width="130rpx">
                <view class="table_th">操作</view>
              </uni-th>
            </uni-tr>

          <uni-tr v-for="(item,index) in temporary" :key="index" class="data-row">
            <uni-td align="center">
              <view class="node-label">节点{{ index + 1 }}</view>
            </uni-td>
            <uni-td align="center">
              <input
                class="table-input"
                v-model="temporary[index].time"
                type="number"
                @input="updata(temporary[index])"
                placeholder="时间"
              />
            </uni-td>
            <uni-td align="center">
              <input
                class="table-input"
                v-model="temporary[index].temp"
                type="number"
                @input="updata(temporary[index])"
                placeholder="温度"
              />
            </uni-td>
            <uni-td align="center">
              <view class="action-cell">
                <view v-if="index >= 2" class="delete-btn" @click="deletedot(index)">
                  <uni-icons type="trash" size="18" color="#d53f4e"></uni-icons>
                </view>
                <view v-else class="placeholder-action">-</view>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        </view>

        <button class="add-node-button" @click="adddot()">
          <uni-icons type="plus" size="18" color="#fff"></uni-icons>
          <text class="add-node-text">增加节点</text>
        </button>
      </view>
    </view>


    <view class="title_box" v-if="showchart">
      <!-- <uni-icons type="forward"></uni-icons> -->
      <image class="image_5" style="float :left; margin-right: 10px; width: 20px; height: 20px;"
             src="../../static/images/0d432bf50adced99be0d726890c0d4ec.png"/>
      <text>温度曲线</text>
    </view>

    <view class="infocard_full">
      <!-- <uni-section class="mb-10" title="预期温度曲线图 (℃-分钟)" type="line" v-if="showchart"></uni-section> -->

<!--      <view class="flex-row items-center space-x-20">-->
<!--        <view class="section_11"></view>-->
<!--        <text class="text_10">预期温度曲线图（摄氏度-分钟）</text>-->
<!--      </view>-->

      <view class="charts-box" v-if="showchart">
        <qiun-data-charts type="area" :eopts="opts1" :chartData="chartData1" :ontouch="true" :onzoom="true"
                          :disableScroll="true" :echartsH5="true" :echartsApp="true"></qiun-data-charts>
      </view>

      <view class="title_box" v-if="showtip">
        <uni-icons type="forward"></uni-icons>
        <text>提示</text>
      </view>

      <view class="tip_box" v-if="showtip && temporary_ins && temporary_ins.length > 0">
        <view class="tip" v-for="(item,index) in temporary_ins">
          <view v-if="item.speed > 1000 || item.speed < -1000">
            <view class="text-gray">警告</view>
            <text class="error">节点{{ index + 1 }}到节点{{ index + 2 }}之间温度变化速率过快，达到了</text>
            <text class="errorbond">{{ item.speed }} ℃/小时</text>
            <text class="error">，该设备最高温度变化速率为 ±1000 ℃/小时，请修改！</text>
          </view>
        </view>
      </view>
    </view>


    <view class="button_box">
      <button @click="saveMyexper()" v-if="(!showtip) && showchart">保存</button>
    </view>


    <view v-if="showplusmenu" @click="zzc" class="zzc"></view>
  </view>
</template>

<script>
import SeniorTable from "@/components/data-table/senior-table.vue"
import {_savemyexper} from '@/service/myexper_api.js'

export default {
  components: {
    SeniorTable
  },
  data() {
    return {

      showplusmenu: false,
      showtip: false,
      expername: '',
      experins: '',
      usernum: '',
      //卡片数据
      showset: true,
      showstep2: false,
      //time:时间点
      //longtime:当前时间点持续时间
      //speed:每小时温度上升速率
      temporary_ins: [
        {phase: '阶段1', ins: '', longtime: 10, speed: 180.00},
        {phase: '阶段2', ins: '', longtime: 20, speed: 90.00}
      ],
      temporary: [
        {temp: 30, time: 0, longtime: 10},
        {temp: 60, time: 10, longtime: 20},
        {temp: 90, time: 30, longtime: 0}
      ],
      //曲线图
      showchart: false,
      chartData1: {},
      opts1: {
        title: {
          show: true,
          text: '预期温度曲线图 (℃/S)',
          textStyle: {
            fontSize: 15,
          }
        },
        legend: {
          show: true,
          top: "top",
          right: 20,
        },
        grid: [{
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "20%",
          // show: false,
          containLabel: true
        }],
        xAxis: {
          show: true,
          type: 'category',
          axisTick: {
            show: true,
            alignWithLabel: true//刻度线与标签对齐
          }
        },
        yAxis: {
          show: true,
          // type: 'value',
          splitNumber: 5,
          splitLine: {
            show: false//显示网格线
          },
          axisLine: {
            show: true,
          }
        },
      },
    }
  },
  computed: {
    // 计算实验总时长（取最后一个节点的时间）
    expertotaltime() {
      if (this.temporary && this.temporary.length > 0) {
        return this.temporary[this.temporary.length - 1].time;
      }
      return 0;
    },
    // 计算节点数（数组长度）
    experdot() {
      return this.temporary ? this.temporary.length : 0;
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (res) => {
        this.opts1.title.textStyle.fontSize = 15 * res.windowWidth / 407;
      }
    });
    try {
      const value = uni.getStorageSync('userInfo');
      if (value) {
        this.usernum = value.accountNum
      }
    } catch (e) {
      console.error(e);
    }
    this.setCard();
  },
  methods: {
    // 遮罩层
    zzc() {
      this.showplusmenu = false;
    },
    clickrighticon() {
      this.showplusmenu = !this.showplusmenu;
    },
    // setinfo(){
    // 	this.showset = !this.showset
    // },
    saveinfo() {
      for (let i = 0; i < this.temporary.length - 1; i++) {
        this.temporary[i].longtime = this.temporary[i + 1].time - this.temporary[i].time
      }
      this.temporary[this.temporary.length - 1].longtime = 0;
      // this.showset = !this.showset
      this.setDataForchart()
      this.setSpeed()
    },
    setCard() {
      // this.temporary = [
      //   {temp: 30, time: 0, longtime: 10},
      //   {temp: 60, time: 10, longtime: 20},
      //   {temp: 90, time: 30, longtime: 0}
      // ]

      // this.temporary_ins = [
      //   {phase: '阶段1', ins: '', longtime: 10, speed: 180.00},
      //   {phase: '阶段2', ins: '', longtime: 20, speed: 90.00}
      // ];

      this.showstep2 = true
      this.setDataForchart()
    },
    setSpeed() {
      this.showtip = false;
      this.temporary_ins = [];
      for (let i = 0; i < this.experdot - 1; i++) {
        let speed = Number((((this.temporary[i + 1].temp - this.temporary[i].temp) / (this.temporary[i + 1].time - this.temporary[i].time)) * 60).toFixed(2));
        if(speed > 1000 || speed < -1000){
          this.showtip = true;//温度变化过快触发
        }
        this.temporary_ins.push({
          phase: '阶段' + (i + 1),
          ins: '',
          longtime: this.temporary[i + 1].time - this.temporary[i].time,
          speed
        })
      }
    },
    updata(data){
      data.time = Number(data.time);
      data.temp = Number(data.temp);
      this.saveinfo();
    },
    setDataForchart() {
      let categories = [];
      let data = [];
      this.chartData1 = JSON.parse(JSON.stringify({}));
      this.temporary.forEach((temporary, index) => {

        if (index === 0) return;
        const lastDot = this.temporary[index - 1];
        const k = (temporary.temp - lastDot.temp) / ((temporary.time - lastDot.time) * 60);
        console.log(k,temporary.temp,lastDot.temp)
        const startTime = lastDot.time * 60;
        const endTime = temporary.time * 60;
        for (let time = startTime; time <= endTime; ++time) {
          categories.push(time);
          data.push(Number((lastDot.temp + k * (time - startTime)).toFixed(2)));//使用了点斜式
          // data.push(Math.round(lastDot.temp + k * (time - startTime)));//使用了点斜式
        }
      });
      var series = [];
      series.push({
        name: "预期工作温度",
        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        data
      })
      let res1 = {
        categories,
        series
      }
      // setTimeout(()=>{},500);
      this.chartData1 = JSON.parse(JSON.stringify(res1));
      this.showchart = true
    },
    adddot() {
      // 获取节点1和节点2
      const node1 = this.temporary[0];
      const node2 = this.temporary[1];

      // 计算节点1和节点2之间的差值
      const timeDelta = node2.time - node1.time;  // 时间差值
      const tempDelta = node2.temp - node1.temp;  // 温度差值

      // 获取最后一个节点
      let [lastDot] = this.temporary.slice(-1);

      // 计算新节点的时间和温度
      const newTime = lastDot.time + timeDelta;
      const newTemp = lastDot.temp + tempDelta;

      // 添加新节点
      this.temporary.push({
        time: newTime,
        temp: newTemp,
        longtime: timeDelta,
      })

      this.saveinfo();
    },
    deletedot(index) {
      this.temporary.splice(index, 1);
      this.saveinfo();
      console.log(this.temporary)
    },
    navBack() {
      uni.navigateBack({})
    },
    async saveMyexper() {
      console.log("保存！！");
      try {
        if (this.expername == '') {
          this.$api.msg('实验名称不能为空！');
        } else {

          let details = {
            total_time: this.expertotaltime,
            temporary: this.temporary,
            temporary_ins: this.temporary_ins
          }
          let data = {
            name_exper: this.expername,
            num_user: this.usernum,
            time_exper: this.expertotaltime,
            equip_exper: '高温箱式加热炉',
            ins_exper: this.experins,
            num_node: this.experdot,
            details
          }
          let data1 = JSON.stringify(data)
          let res = await _savemyexper(data1)
          if (res.flag == true) {
            this.navBack()
          }

        }
      } catch (e) {
        console.error(e)
      }
    },
    clickexcel() {
      console.log("选择excel")
      uni.uploadFile({
        url: 'http://43.142.102.167:8090/mics/uploadtest',
        filePath: "C:\Users\lenovo\Desktop\智能家居.png",
        name: 'file',
        success: (res) => {
          console.log(res)
        }
      })
    }
  }
}

</script>

<style lang="scss">
.page {
  min-height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 40rpx;
}

// 遮罩层
.zzc {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-color: #000;
}

.envir_box {
  background-color: white;
  margin-top: 20upx;
  margin-left: 30upx;
  margin-right: 30upx;
  padding: 20rpx 32rpx 20rpx 32rpx;
  box-sizing: border-box;

  border-radius: 20upx;
  box-shadow: 0px 4.17rpx 8.33rpx #00000040;
}

.text-gray {
  font-size: 26rpx;
  color: #333;
  margin-right: 10rpx;
  font-weight: 500;
  white-space: nowrap;
}

.head_block {
  padding: 10upx;
  margin-top: 10rpx;
  display: flex;

  .flex_1 {
    flex: 1;
  }

  .text_red {
    padding-left: 10rpx;
    color: #d53f4e;
  }

  .text_blue {
    padding-left: 10rpx;
    color: #267cb9;
  }

  .text_green {
    padding-left: 10rpx;
    color: #138f87;
  }
}

.plusmenu {
  z-index: 1;
  position: absolute;
  right: 0;
  background-color: white;
  width: 250rpx;
  border-radius: 20upx;
  padding: 10rpx;

  .menulist {
    font-size: 33.3rpx;
    text-align: center;
    padding-left: 10rpx;
    padding-right: 10rpx;

    .text {
      padding-bottom: 15rpx;
      padding-top: 15rpx;
    }

    .line {
      height: 2rpx;
      background-color: #999;
    }
  }
}

.title_box {
  margin-top: 20upx;
  margin-left: 10upx;
  margin-right: 10upx;
  padding-left: 30upx;
  padding-top: 1upx;
  width: 730upx;

  .right1 {
    padding-left: 440upx;
    font-weight: 100;
    text-decoration: underline;
  }

  .right2 {
    padding-left: 440upx;
    font-weight: 100;
    color: #138f87;
  }
}

.bottom_popup_box {
  padding: 20upx;
  background-color: white;
  border-radius: 20upx;
}

.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.uni-padding-wrap {
  display: flex;

  .save {
    position: absolute;
    right: 0;
    padding-right: 50upx;
    color: #267cb9;
  }
}

.mb-10 {
  margin-left: 10rpx;
  margin-right: 10rpx;

  text {
    color: #999;
  }
}

.charts-box {
  background: #fff;
  // padding-top: 30rpx;
  // padding-bottom: 10rpx;
  //margin-left: 10rpx;
  //margin-right: 10rpx;
  border-radius: 12.5rpx;
  height: 500rpx;
  width: 100%;
}

.table {
  padding-left: 10upx;
  padding-right: 10upx;
}

.infocard_box {
  background-color: white;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
}

// 表格滚动容器
.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  // 隐藏滚动条
  &::-webkit-scrollbar {
    display: none;
  }
}

.example-body {
  display: flex;
  margin-left: 150upx;

  .tag-view {
    padding-left: 10upx;
  }
}

.cardtext {
  font-size: 31rpx;
  color: #666;
  margin-right: 10rpx;
}

.tip_box {
  background-color: white;
  margin-top: 20upx;
  margin-left: 10upx;
  margin-right: 10upx;
  margin-bottom: 30upx;
  border-radius: 20upx;
  padding: 20upx;

  .tip {
    .error {
      color: #d53f4e;
      font-weight: 100;
      padding-left: 30upx;
    }

    .errorbond {
      color: #d53f4e;
      font-weight: bond;
      padding-left: 30upx;
    }
  }
}

.button_box {
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 50rpx;
  margin-bottom: 50upx;

  button {
    width: 400rpx;
    background-color: #138f87;
    color: #fff;
    border-radius: 50upx;
    font-size: 33upx;
    height: 80upx;
    padding-left: 50upx;
    padding-right: 50upx;
  }
}

// 输入组容器
.input-group {
  margin-top: 20rpx;
  padding: 0 10rpx;
}

// 输入项
.input-item {
  margin-bottom: 20rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

// 输入标签
.input-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 12rpx;
  padding-left: 4rpx;
}

// 输入框
.input-field {
  width: 100%;
  height: 80rpx;
  padding: 0 24rpx;
  background-color: #f7f8fa;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  transition: all 0.3s ease;

  &:focus {
    background-color: #fff;
    border-color: #138f87;
  }
}

// 文本域
.textarea-field {
  width: 100%;
  min-height: 80rpx;
  max-height: 400rpx;
  padding: 20rpx 24rpx;
  background-color: #f7f8fa;
  border: 2rpx solid #e5e5e5;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  line-height: 1.6;
  transition: border-color 0.3s ease, background-color 0.3s ease;

  &:focus {
    background-color: #fff;
    border-color: #138f87;
  }
}

// placeholder样式
.textarea-placeholder {
  color: #999;
  font-size: 28rpx;
}


// 卡片头部
.card-header {
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  margin-bottom: 10rpx;
}

// 表格样式
.data-table {
  border-radius: 8rpx;
  overflow: hidden;
  min-width: 650rpx;
  width: 100%;
}

.data-row {
  transition: background-color 0.2s ease;
}

// 节点标签
.node-label {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

// 表格输入框
.table-input {
  width: 100%;
  height: 60rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  background-color: transparent;
  border: none;

  &:focus {
    color: #138f87;
  }
}

// 操作列
.action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60rpx;
}

// 删除按钮
.delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background-color: #fff;
  transition: all 0.2s ease;
  cursor: pointer;

  &:active {
    background-color: #ffebee;
    transform: scale(0.9);
  }
}

// 占位符
.placeholder-action {
  color: #ddd;
  font-size: 28rpx;
}

// 表头样式
.table_th {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  font-weight: 500;
}

// 增加节点按钮
.add-node-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
  font-size: 28rpx;
  background: linear-gradient(135deg, #138f87 0%, #0d6962 100%);
  color: white;
  border-radius: 12rpx;
  height: 80rpx;
  width: 100%;
  margin-top: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(19, 143, 135, 0.3);
  border: none;
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(19, 143, 135, 0.3);
  }
}

.add-node-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}

.infocard_full {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 30rpx 24rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0px 4rpx 16rpx rgba(0, 0, 0, 0.08);
  border: solid 2rpx #138f8720;
  margin-top: 30upx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  overflow: hidden;
}

.uni-table-th {
  background-color: #138f87;
}

.section_11 {
  background-color: #138f87;
  border-radius: 14.58rpx;
  width: 8.33rpx;
  height: 29.42rpx;
  margin-top: 20rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

.text_10 {
  color: #000000;
  font-size: 29.33rpx;
  font-family: WenQuanYiMicroHeiMono;
  line-height: 22.29rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
}
</style>
